<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 房屋租赁平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f7fa;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .content {
            padding: 30px;
        }

        .profile-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e1e5e9;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .info-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }

        .info-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 16px;
            color: #333;
            font-weight: 500;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-verified {
            background-color: #d4edda;
            color: #155724;
        }

        .status-unverified {
            background-color: #f8d7da;
            color: #721c24;
        }

        .identity-section {
            background: #e7f3ff;
            border: 1px solid #b3d9ff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .identity-section.verified {
            background: #d4edda;
            border-color: #c3e6cb;
        }

        .identity-section.unverified {
            background: #fff3cd;
            border-color: #ffeaa7;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.2s ease;
            border: none;
            cursor: pointer;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #6c757d;
        }

        .alert {
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .alert-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .role-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: 500;
            margin-left: 10px;
        }

        .role-tenant {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .role-landlord {
            background-color: #f3e5f5;
            color: #7b1fa2;
        }

        .role-agent {
            background-color: #e8f5e8;
            color: #388e3c;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>👤 个人资料</h1>
            <p>管理您的账户信息和认证状态</p>
        </div>

        <div class="content">
            <div id="alertContainer"></div>
            <div id="loadingContainer" class="loading">
                <p>正在加载个人资料...</p>
            </div>

            <div id="profileContainer" style="display: none;">
                <!-- 基本信息 -->
                <div class="profile-section">
                    <h2 class="section-title">📋 基本信息</h2>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">用户名</div>
                            <div class="info-value" id="username">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">邮箱</div>
                            <div class="info-value" id="email">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">手机号</div>
                            <div class="info-value" id="phone">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">性别</div>
                            <div class="info-value" id="gender">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">生日</div>
                            <div class="info-value" id="birthday">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">城市</div>
                            <div class="info-value" id="city">-</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">用户角色</div>
                            <div class="info-value">
                                <span id="roleName">-</span>
                                <span id="roleBadge" class="role-badge"></span>
                            </div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">注册时间</div>
                            <div class="info-value" id="createTime">-</div>
                        </div>
                    </div>
                </div>

                <!-- 实名认证状态 -->
                <div class="profile-section">
                    <h2 class="section-title">🔐 实名认证</h2>
                    <div id="identitySection" class="identity-section">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h3 style="margin: 0;">认证状态</h3>
                            <span id="verificationStatus" class="status-badge">未认证</span>
                        </div>
                        
                        <div id="identityInfo" style="display: none;">
                            <div class="info-grid">
                                <div class="info-item">
                                    <div class="info-label">真实姓名</div>
                                    <div class="info-value" id="realName">-</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">身份证号</div>
                                    <div class="info-value" id="identityCard">-</div>
                                </div>
                            </div>
                        </div>

                        <div id="verificationActions" style="margin-top: 15px;">
                            <a href="identity-verification.html" class="btn" id="verifyBtn">立即认证</a>
                            <p style="margin-top: 10px; font-size: 14px; color: #666;">
                                完成实名认证后，您可以使用房东发布房源、中介代理等高级功能
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 个人简介 -->
                <div class="profile-section">
                    <h2 class="section-title">📝 个人简介</h2>
                    <div class="info-item">
                        <div class="info-value" id="bio" style="line-height: 1.6;">暂无个人简介</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 获取token
        function getToken() {
            return localStorage.getItem('userToken') || 'your-test-token-here';
        }

        // 显示提示信息
        function showAlert(message, type = 'error') {
            const alertContainer = document.getElementById('alertContainer');
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type}`;
            alertDiv.textContent = message;
            
            alertContainer.innerHTML = '';
            alertContainer.appendChild(alertDiv);
        }

        // 格式化身份证号（隐藏中间部分）
        function formatIdCard(idCard) {
            if (!idCard || idCard.length < 10) return idCard;
            return idCard.substring(0, 6) + '****' + idCard.substring(idCard.length - 4);
        }

        // 获取角色样式类
        function getRoleClass(role) {
            switch(role) {
                case 1: return 'role-tenant';
                case 2: return 'role-landlord';
                case 3: return 'role-agent';
                default: return 'role-tenant';
            }
        }

        // 加载用户资料
        async function loadUserProfile() {
            const token = getToken();
            
            try {
                const response = await fetch('/user/profile', {
                    method: 'GET',
                    headers: {
                        'info': token
                    }
                });

                const result = await response.json();
                
                if (response.ok && result.code === 200) {
                    displayUserProfile(result.data);
                } else {
                    showAlert(result.message || '获取用户资料失败');
                }
            } catch (error) {
                console.error('获取用户资料失败:', error);
                showAlert('网络错误，请检查网络连接后重试');
            } finally {
                document.getElementById('loadingContainer').style.display = 'none';
                document.getElementById('profileContainer').style.display = 'block';
            }
        }

        // 显示用户资料
        function displayUserProfile(profile) {
            // 基本信息
            document.getElementById('username').textContent = profile.username || '-';
            document.getElementById('email').textContent = profile.email || '-';
            document.getElementById('phone').textContent = profile.phone || '-';
            document.getElementById('gender').textContent = profile.gender || '-';
            document.getElementById('birthday').textContent = profile.birthday || '-';
            document.getElementById('city').textContent = profile.city || '-';
            document.getElementById('roleName').textContent = profile.roleName || '-';
            document.getElementById('createTime').textContent = profile.createTime ? 
                new Date(profile.createTime).toLocaleString('zh-CN') : '-';
            document.getElementById('bio').textContent = profile.bio || '暂无个人简介';

            // 角色徽章
            const roleBadge = document.getElementById('roleBadge');
            roleBadge.textContent = profile.roleName || '-';
            roleBadge.className = `role-badge ${getRoleClass(profile.role)}`;

            // 实名认证状态
            const identitySection = document.getElementById('identitySection');
            const verificationStatus = document.getElementById('verificationStatus');
            const identityInfo = document.getElementById('identityInfo');
            const verificationActions = document.getElementById('verificationActions');

            if (profile.isIdentityVerified) {
                // 已认证
                identitySection.className = 'identity-section verified';
                verificationStatus.textContent = '已认证';
                verificationStatus.className = 'status-badge status-verified';
                
                // 显示认证信息
                if (profile.realName || profile.identityCard) {
                    document.getElementById('realName').textContent = profile.realName || '-';
                    document.getElementById('identityCard').textContent = 
                        profile.identityCard ? formatIdCard(profile.identityCard) : '-';
                    identityInfo.style.display = 'block';
                }
                
                verificationActions.innerHTML = `
                    <p style="color: #155724; font-size: 14px;">
                        ✅ 您已完成实名认证，可以使用所有平台功能
                    </p>
                `;
            } else {
                // 未认证
                identitySection.className = 'identity-section unverified';
                verificationStatus.textContent = '未认证';
                verificationStatus.className = 'status-badge status-unverified';
                identityInfo.style.display = 'none';
            }
        }

        // 页面加载时获取用户资料
        window.addEventListener('load', function() {
            const token = getToken();
            if (!token || token === 'your-test-token-here') {
                showAlert('请先登录');
                return;
            }
            
            loadUserProfile();
        });
    </script>
</body>
</html>
